import React from 'react';
import { TreeSelect as AntdTreeSelect } from 'antd';
import type { TreeSelectProps as AntdTreeSelectProps } from 'antd';
import { createStyles } from 'antd-style';

export interface TreeSelectProps<T = any> extends AntdTreeSelectProps<T> {
  /**
   * @description 自定义样式类名
   */
  customClassName?: string;
}

const useStyles = createStyles(({ token, css }) => ({
  treeSelect: css`
    width: 100%;
  `,
}));

const TreeSelectComponent = <T extends any = any>({ customClassName, className, ...restProps }: TreeSelectProps<T>) => {
  const { styles, cx } = useStyles();
  
  const treeSelectClassName = cx(
    className,
    customClassName,
    styles.treeSelect
  );

  return <AntdTreeSelect className={treeSelectClassName} {...restProps} />;
};

const TreeSelect = Object.assign(TreeSelectComponent, {
  SHOW_ALL: AntdTreeSelect.SHOW_ALL,
  SHOW_PARENT: AntdTreeSelect.SHOW_PARENT,
  SHOW_CHILD: AntdTreeSelect.SHOW_CHILD,
  TreeNode: AntdTreeSelect.TreeNode,
  _InternalPanelDoNotUseOrYouWillBeFired: AntdTreeSelect._InternalPanelDoNotUseOrYouWillBeFired,
});

export { TreeSelect };
export default TreeSelect;

